{% extends 'users/_base_otp.html' %}
{% load static %}
{% load i18n %}

{% block small_title %}
    {% if title %}
        {{ title }}
    {% else %}
        {% trans 'Authenticate' %}
    {% endif %}
{% endblock %}

{% block content %}
    <div class="verify">
        <p style="margin: 20px auto;"><strong style="color: #000000">{% trans 'The account protection has been opened, please complete the following operations according to the prompts' %}</strong></p>
        <img src="{% static 'img/otp_auth.png' %}" alt="" width="72px" height="117">
        <p style="margin: 20px auto;">{% trans 'Open MFA Authenticator and enter the 6-bit dynamic code' %}</p>
    </div>

    <form class="" role="form" method="post" action="">
        {% csrf_token %}
        {% if 'otp_code' in form.errors %}
            <p class="red-fonts">{{ form.otp_code.errors.as_text }}</p>
        {% endif %}

        <div class="form-input">
            <input type="text" class="" name="otp_code" placeholder="{% trans 'Six figures' %}" required="">
        </div>

        <button type="submit" class="next">{% trans 'Next' %}</button>
    </form>

    <script>
        $(function(){
            $('.change-color li').eq(2).remove();
            $('.change-color li:eq(1) div').eq(1).html("{% trans 'Disable' %}")
        })
    </script>
{% endblock %}


